<template>
  <el-steps :active="active" align-center finish-status="success" process-status="finish">
    <el-step
      v-for="(item, i) in setpsList"
      :key="i"
      :title="item.statusName"
      :description="item.createTime"
      :icon="item.icon"
    ></el-step>
  </el-steps>
</template>

<script>
export default {
  name: 'Steps',
  props: {
    setpsList: {
      type: Array
    } // 渲染步骤条数据（后端返回）
  },
  data() {
    return {
      active: null
    }
  },
  watch: {
    setpsList(newVlaue) {
      this.activeStep(newVlaue)
    }
  },
  methods: {
    activeStep(list) {
      if (!list) {
        return
      }
      list.forEach((e) => {
        if (e.index != null) {
          if (e.index === list.length - 1) {
            this.active = e.index + 1
          } else {
            this.active = e.index
          }
        }
      })
    }
  },
  created() {
    this.activeStep(this.setpsList)
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-step {
  .el-step__head.is-finish {
    color: #f40 !important;
  }
  .el-step__title.is-finish {
    color: #f40 !important;
  }
  .el-step__description.is-finish {
    color: #f40 !important;
  }
}
</style>
